<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <link rel="stylesheet" th:href="@{/statics/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/statics/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/statics/plugins/jqgrid/ui.jqgrid-bootstrap.css}">
    <link rel="stylesheet" th:href="@{/statics/plugins/ztree/css/metroStyle/metroStyle.css}">
    <link rel="stylesheet" th:href="@{/statics/css/main.css}">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>作业流程编辑器</title>
    <script>
        var baseURL = "../../";
        function getCookie(name)
        {
            var cookie = $.cookie(name);
            if(cookie)
                return cookie;
            else
                return null;
        }
    </script>
    <style>
        *{
            padding:0;
            margin:0;
            box-sizing: border-box;
        }
        #left{
            border:1px solid #000;
            float: left;
            padding:0 10px;
            position:relative;
            width: 10%;
        }
        #right{
            border:1px solid #000;
            float: left;
            padding:0 10px;
            position:relative;
            width: 10%;
        }
        #main{
            height:98%;
            width:80%;
            border:1px solid #000;
            float: left;
            position:relative;
        }
        .item{
            background: #ffffff;
            height: 25px;
            width: 118px;
            border: 1px solid #5F9EDF;
            margin: 5px 0;
            font: 10px/23px "微软雅黑";
            text-align: center;
            border-radius: 10px;
            cursor: pointer;
        }
        .theGrey{
            background:#ccc!important;
        }
        .ribbon-wrap{
            top: 45px;
            left: -50px;
            position: absolute;
        }
        .ribbon-wrap .trap-ribbon{
            left: -6px;
        }
        .ribbon-wrap .trap-ribbon a{
            font-size: 10px;
        }
    </style>
    <script type="text/javascript">
        var baseURL = "../../";
        //var baseUrl = "https://www.easy-mock.com/mock/5cdd370d2835327c57e2e575/test/";
    </script>
</head>
<body style="height: 100%">
<div id="left">
    <div class="trap ribbon-wrap" style="border-bottom:10px solid #00aa32;border-top:10px solid #00aa32">
        <div class="trap-ribbon">
            <a href="#">离线同步<i class="fa fa-github-alt"></i></a>
        </div>
    </div>
    <div id="syncNode" class="node">
        <div class="item" data-index="1">cf_训练_data</div>
        <div class="item" data-index="2">cf_sql取购买行为</div>
    </div>
</div>
<div id="main">
</div>
<div id="right">
    <div class="trap ribbon-wrap" style="border-bottom:10px solid #00aa32;border-top:10px solid #00aa32">
        <div class="trap-ribbon">
            <a href="#">数据开发<i class="fa fa-github-alt"></i></a>
        </div>
    </div>
    <div id="developNode" class="node">

    </div>
</div>


<script th:src="@{/statics/libs/jquery.min.1.10.2.js}"></script>
<script th:src="@{/statics/js/jquery.cookie.js}" type="text/javascript"></script>

<script th:src="@{/statics/libs/jquery-ui.min.js}"></script>
<script th:src="@{/statics/plugins/jsPlumb/jquery.jsplumb.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/statics/js/modules/dataworks/flowWork.js}" type="text/javascript" charset="utf-8"></script>
</body>
</html>